<template>
	<div class="city">
		<CityHeader></CityHeader>
		<city-search :cities="cities"></city-search>
		<city-list :hotCities="hotCities" :cities="cities" :elKey="elKey"></city-list>
		<city-letter :cities="cities" @getKey="getKey"></city-letter>
	</div>
</template>
<script>
	import CityHeader from './component/Header'
	import CitySearch from './component/Search'
	import CityList from './component/List'
	import CityLetter from './component/Letter'
	import axios from 'axios'
	export default{
		name:"City",
		data(){
			return {
				hotCities:[],
				cities:{},
				elKey:""
			}
		},
		components:{
			CityHeader,
			CitySearch,
			CityList,
			CityLetter
		},
		methods:{
			getCityInfo(){
				axios.get("/api/city.json").then(this.getCityInfoHandle)
			},
			getCityInfoHandle(res){
				let data = res.data.data
				this.hotCities = data.hotCities
				this.cities = data.cities
			},
			getKey(key){
				this.elKey = key
			}
		},
		mounted(){
			this.getCityInfo()
		}
	}
</script>
<style lang="less" scoped>
</style>